<!-- src/components/LoginPage.vue -->
<template>
<div id="LoginPage">
    <div class="login-overlay"></div>
    <div id="LoginBox">
        <div class="login-header">
            <h1 class="system-title">慧医数字医疗系统</h1>
            <p class="system-subtitle">智慧医疗 · 守护健康</p>
        </div>
        
        <form id="LoginForm">
            <div class="input-group">
                <div class="input-wrapper">
                    <i class="el-icon-user input-icon"></i>
                    <el-input 
                        placeholder="请输入用户名" 
                        prefix-icon="" 
                        v-model="userName" 
                        type="text" 
                        id="userName-input"
                        class="custom-input"
                    ></el-input>
                </div>
            </div>
            
            <div class="input-group">
                <div class="input-wrapper">
                    <i class="el-icon-lock input-icon"></i>
                    <el-input 
                        placeholder="请输入密码" 
                        prefix-icon="" 
                        v-model="password" 
                        type="password" 
                        id="password-input"
                        class="custom-input"
                        show-password
                    ></el-input>
                </div>
            </div>
            
            <div class="input-group">
                <div class="yzm-container">
                    <div class="input-wrapper yzm-input-wrapper">
                        <i class="el-icon-key input-icon"></i>
                        <el-input 
                            placeholder="请输入验证码" 
                            v-model="yzm" 
                            type="text" 
                            id="yzm-input"
                            class="custom-input"
                        ></el-input>
                    </div>
                    <img :src="img_url" @click="dianji" class="yzm-img" title="点击刷新验证码">
                </div>
            </div>
            
            <div class="login-button-container">
                <el-button type="primary" @click="login" :loading="loading" class="login-btn">
                    {{ loading ? '登录中...' : '安全登录' }}
                </el-button>
            </div>
            
            <div class="login-footer">
                <el-checkbox v-model="rememberMe" class="remember-checkbox">记住我</el-checkbox>
                <el-link type="primary" class="forgot-link" @click="handleForgotPassword">忘记密码？</el-link>
            </div>
        </form>
        
        <div class="system-info">
            <p class="copyright">© 2023 慧医数字医疗系统 v2.0</p>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios'

export default{
    name:"LoginPage",
    data(){
        return {
            userName:"",
            password:"",
            yzm:"",
            img_url:"http://localhost:8080/yzm",
            loading: false,
            rememberMe: false
        }
    },
    mounted() {
        // 页面加载时刷新验证码
        this.dianji()
    },
    methods:{
        dianji(){
            this.img_url="http://localhost:8080/yzm?num="+Date.now()
        },
        login(){
            if (!this.userName || !this.password || !this.yzm) {
                this.$message.warning('请填写完整的登录信息')
                return
            }
            
            this.loading = true
            axios.get("http://localhost:8080/login",{
                params:{
                    uname:this.userName,
                    pwd:this.password,
                    yzm:this.yzm
                }
            }).then(res=>{
                if(res.data=="yes"){
                    this.$message.success('登录成功，正在跳转...')
                    // 保存登录状态（如果选择了记住我）
                    if (this.rememberMe) {
                        localStorage.setItem('rememberedUser', this.userName)
                    } else {
                        localStorage.removeItem('rememberedUser')
                    }
                    setTimeout(() => {
                        this.$router.push({path:"/IndexPage"})
                    }, 1000)
                }else{
                    this.$message.error(res.data)
                    // 登录失败时刷新验证码
                    this.dianji()
                }
            }).catch(error => {
                this.$message.error('登录请求失败，请检查网络连接')
                console.error('登录错误:', error)
            }).finally(() => {
                this.loading = false
            })
        },
        handleForgotPassword() {
            this.$message.info('请联系系统管理员重置密码')
        }
    }
}
</script>

<style scoped>
#LoginPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/LoginBackground.jpg") center/cover no-repeat;
    opacity: 0.8;
    filter: blur(2px);
}

#LoginBox {
    width: 450px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    padding: 30px;
    backdrop-filter: blur(10px);
    animation: slideUp 0.6s ease-out;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.system-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.system-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

#LoginForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.input-group {
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #909399;
    z-index: 1;
    font-size: 16px;
}

.custom-input {
    width: 100%;
}

::v-deep .custom-input .el-input__inner {
    height: 45px;
    padding-left: 40px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
}

::v-deep .custom-input .el-input__inner:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.yzm-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.yzm-input-wrapper {
    flex: 1;
    margin-right: 12px;
}

.yzm-img {
    height: 45px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.yzm-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-button-container {
    margin: 25px 0 15px 0;
}

.login-btn {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(45deg, #409eff, #64b5f6);
    border: none;
    transition: all 0.3s;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
}

.login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

::v-deep .remember-checkbox .el-checkbox__label {
    color: #666;
    font-size: 13px;
}

.forgot-link {
    font-size: 13px;
}

.system-info {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.copyright {
    font-size: 12px;
    color: #999;
    margin: 0;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 576px) {
    #LoginBox {
        width: 90%;
        margin: 0 5%;
        padding: 20px;
    }
    
    .system-title {
        font-size: 20px;
    }
    
    .yzm-container {
        flex-direction: column;
    }
    
    .yzm-input-wrapper {
        margin-right: 0;
        margin-bottom: 12px;
    }
    
    .yzm-img {
        width: 100%;
    }
}

/* 键盘支持 */
#LoginForm .el-input__inner:focus,
.yzm-img:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
}
</style>